<template>
	<div>
		<el-form class="query-form" :model="query_params">
			<el-row>
		    <el-col class="query-item" :span="6">
				<el-form-item label="用户名称" prop="nickname">
					<el-input v-model="query_params.nickname"  autocomplete="off" placeholder="请输入用户名称" />
				</el-form-item>
			</el-col>
			<el-col class="query-item" :span="6">
				<el-form-item label="用户电话" prop="phone">
					<el-input v-model="query_params.phone"  autocomplete="off" placeholder="请输入用户电话" />
				</el-form-item>
			</el-col>
			<el-col class="query-item" :span="6">
				<el-form-item >
					<el-button type="primary" @click="search">搜索</el-button>
				</el-form-item>
			</el-col>

		  </el-row>
		</el-form>
		<!-- <el-row class="add-box-css"><el-button type="primary" @click="activity_operation">新增</el-button></el-row> -->
		<el-table :data="tableData" border style="width: 100%">
		    <el-table-column label="序号" >
				<template #default="scope">
		            {{scope.$index+1}}
		        </template>
		    </el-table-column>
				<el-table-column prop="avatar" label="头像" >
					<template #default="scope">
						<el-image class="list-avatar" style="width: 100px; height: 100px" :src="scope.row.avatar"  />
					</template>
				</el-table-column>
		    <el-table-column prop="nickname" label="昵称" width="180" />
			<el-table-column prop="name" label="姓名" width="180" />
		    <el-table-column prop="phone" label="电话" />
		    <el-table-column prop="" label="服务情况">
					<template #default="scope">
							<div style="cursor: pointer;color: #409eff;" @click="open_service(scope.row)">点击查看</div>
					</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="入驻时间" />
			<el-table-column prop="status" label="状态" >
					<template #default="scope">
							{{getStatus(scope.row)}}
					</template>
			</el-table-column>
			<!-- <el-table-column  label="操作" >
		    	<template #default="scope">
		    		<el-button type="primary" size="small" @click="activity_operation(scope.row)">编辑</el-button>
		    </template>
			</el-table-column> -->
		</el-table>
		<div class="pagination_box">
			<el-pagination background layout="prev, pager, next"  :total="total" @current-change="handleCurrentChange" />
		</div>
		<!-- 服务情况 -->
		<div>
			<el-drawer v-model="drawer" size='60%' :with-header="true">
					<template #title>
						<h4>服务情况【{{current_nickname}}】</h4>
					</template>
			    <template #default>
			      <div>
			      		<!-- 搜索框 -->
						<el-form class="query-form" :model="query_params_service">
							<el-row>
						    <el-col class="query-item" :span="6">
								<el-form-item label="卡券名称" prop="coupon_name">
									<el-input v-model="query_params_service.coupon_name"  autocomplete="off" placeholder="请输入卡券名称" />
								</el-form-item>
							</el-col>
							<el-col class="query-item" :span="6">
								<el-form-item label="购买日期" prop="coupon_date">
									<el-date-picker
								        v-model="query_params_service.coupon_date"
								        type="date"
								        value-format="YYYY-MM-DD"
								        placeholder="请输入购买日期"
								      />
								</el-form-item>
							</el-col>
							<el-col class="query-item" :span="6">
								<el-form-item >
									<el-button type="primary" @click="search_service">搜索</el-button>
								</el-form-item>
							</el-col>

						  </el-row>
						</el-form>
						<!-- 列表信息 -->
						<el-table :data="tableData_service" border style="width: 100%">
						    <el-table-column prop="coupon_name" label="卡券名称" width="180" />
						    <el-table-column prop="all_count" label="总次数" width="180" />
						    <el-table-column prop="service_count" label="剩余次数" />
						    <el-table-column prop="price" label="卡券价格" />
						    <el-table-column prop="buy_date" label="购买日期" />
						    <el-table-column  label="操作" >
						    	<template #default="scope">
							    		<el-button type="primary" size="small" @click="service_operation(scope.row)">管理</el-button>
							    </template>
							</el-table-column>
						</el-table>
			      </div>
			    </template>
			  </el-drawer>
		</div>
		<!-- 管理服务情况 -->
		<el-dialog v-model="service_manage_show" title="服务情况管理">
		    <el-table :data="service_manage_data">
		      <el-table-column property="id" label="服务ID" width="150" />
		      <el-table-column property="name" label="服务名称" width="150" />
		      <el-table-column property="all_count" label="总次数" width="200" />
		      <el-table-column label="剩余次数">
		      	<template #default="scope">
		      		<el-input v-model="scope.row.service_count" placeholder="请输入剩余次数" />
		      	</template>
		      </el-table-column>
		      <el-table-column label="操作">
		      	<template #default="scope">
		      		<el-button @click="save_service_manage(scope.row)">保存</el-button>
		      	</template>
		      </el-table-column>
		    </el-table>
		</el-dialog>
	</div>
</template>
<script type="text/javascript">
	import {  ElMessageBox ,ElMessage} from 'element-plus'

	export default {
		data(){
			return {
				queryForm:{},
				query_params:{
					current:1,
					size:10
				},
				tableData:[],
				total:0,
				drawer:false,
				// 表单
				ruleFormRef:{},
				ruleForm :{
				},
				rules:{
				  name: [
				    { required: true, message: '请输入商户', trigger: 'blur' },
				  ],
				},
				// 服务情况相关
				query_params_service:{ // 查询列表

				},
				tableData_service:[],
				current_nickname:"", // 当前查看的客户昵称
				service_manage_show:false, // 点击管理
				service_manage_data:[],//服务管理数据
			}
		},
		methods:{
			async save_service_manage(row) { // 保存服务剩余次数情况
				const res = await this.$API.saveServiceInfo({
					id:row.id,
					service_count:parseInt(row.service_count)
				})
				if(res.code == 200) {
					ElMessage({
					    message: '修改成功',
					    type: 'success',
					})
				}
			},
			service_operation(row){ // 编辑用户的服务次数
				//打开操作板
				this.service_manage_show = true;
				//梳理数据为标准结构（具体情况视后端返回的结构而定）
				this.service_manage_data = row.user_services;
			},
			async search_service(){ // 根据用户id查询服务情况
				// console.log(this.query_params_service)
				const res = await this.$API.getServiceInfo(this.query_params_service);
				if(res.code == 200) {
					for(let item of res.data) {
						item.all_count = item.user_services.reduce((tatol,item1) => {
							return tatol + item1.all_count
						},0)
						item.service_count = item.user_services.reduce((tatol,item2) => {
							return tatol + item2.service_count
						},0)
					}
					// console.log(res.data)
					this.tableData_service = res.data
				}
			},
			open_service(row){ // 打开客户服务情况
				this.drawer = true;
				this.current_nickname = row.nickname+" "+row.phone
				this.search_service()
			},
			search(){
				this.query_params.current=1;
				this.query_params.size=10;
				this.getList()
			},
			activity_operation(row){
				this.drawer=true
				if(row){//编辑

				}
				else{//新增

				}
			},
			getStatus(row){//查询状态
				var str="正常"
				if(row.status=='-1'){
					str="已退单"
				}
				return str
			},
			confirm(row){//确认身份
				this.$API.confirmRole({
					id:row.id
				}).then(res=>{
					if(res.code==200){
						ElMessage({
						    message: '操作成功',
						    type: 'success',
						})
					}
					else{
						ElMessage({
						    message: '操作失败',
						    type: 'warning',
						})
					}
				}).catch(error=>{
					ElMessage({
						    message: '操作失败',
						    type: 'error',
						 })
				})
			},
			handleCurrentChange(val){
				this.query_params.current=val;
				this.getList();
			},
			getList(){
				this.$API.getUserList(this.query_params).then(res=>{
					if(res.code==200){
						this.tableData=res.data.records;
						if(this.total>1){
							this.total=parseInt(res.total)
						}
					}
				})
			},
		},
		mounted(){
			this.getList();
		}
	}
</script>
<style type="text/css">
	.pagination_box{
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    width: 100%;
	}
	.query-item{
		margin-right:10px
	}
	.query-form{
		    padding:20px;
				    padding-bottom: 0px;
	}
	.add-box-css{
		width:100%;
		align-items: end;
    justify-content: end;
    padding: 0px 1rem 1rem 0px;
	}
	.list-avatar{
		width:66px !important;
		height:66px !important
	}
</style>
